<template>
  <div>
    <button @click="fn">点我跳转到我的</button>
    <button @click="fn2">点我跳转到我的-携带query参数</button>
    <button @click="fn3">点我跳转到friend-直接拼接方式</button>
    <button @click="fn4">点我跳转到friend-对象方式</button>
    <div class="nav-box">
      <!-- 可以用来做路由跳转 -->
      <router-link to="/discover">发现音乐</router-link>
      <router-link to="/my">我的</router-link>

      <!-- <a href="#/discover">发现音乐</a>
      <a href="#/my">我的</a> -->
    </div>

    <router-view />
  </div>
</template>

<script>
export default {

  methods: {
    fn () {
      this.$router.push('/my')
    },

    fn2 () {

      // 都用name
      this.$router.push({
        // path: '/my',
        name: 'my',
        query: {
          id: 101,
          name: 'jack'
        }
      })
    },

    fn3 () {

      // 把参数201直接拼接到路径上
      this.$router.push('/friend/201')
    },

    fn4 () {
      // 如果要用params传参
      // 那么不能用path属性跳转
      // 只能用路由的name属性跳转
      this.$router.push({
        name: 'friend',
        params: {
          id: 401
        }
      })
    }
  }
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
.nav-box {
  display: flex;
  background-color: #242424;
  height: 44px;
  align-items: center;
}

.nav-box a {
  flex: 1;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.nav-box a.router-link-active  {
  color: #f00;
}

</style>
